<template>
  <div>
    <!-- 头部导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>食品分类修改</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      :model="categoryform"
      ref="categoryform"
      label-width="100px"
      class="demo-ruleForm"
      @submit.native.prevent
      style="margin-top:20px"
    >
      <el-form-item
        label="类型"
        prop="name"
        :rules="[
      { required: true, message: '不能为空'},
    ]"
      >
        <el-input type="name" v-model="categoryform.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="可选择">
        <el-switch v-model="categoryform.canuse" ></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('categoryform')">提交</el-button>
        <el-button type="warning" @click="$router.push('/categoryList')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props:['_id'],
  data() {
    return {
      categoryform: {
        // name:'',
        // canuse:true,
      }
    };
  },
  computed: {},
  methods: {
    getOne: function() {
        axios
            .get(`/category/${this._id}`)
            .then(res=>{
                if(res.data){
                    this.categoryform = res.data[0];
                }
            })
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios
                .put('/category',this.categoryform)
                .then(res=>{
                    if(res.data){
                        this.$message({
                        message: '修改成功',
                        type: 'success'
                        });
                    }else{
                        this.$message.error('添加失败');
                    }
                })
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
  mounted() {
      this.getOne();
  }
};
</script>

<style>
.el-form{
    width: 460px;
}
</style>